<template>
  <!-- 标题部分 -->
  <div class="topTitle">
    <!-- 左边 -->
    <div class="left">
      <span>
        <i class="el-icon-s-order"></i>
      </span>
      <div>
        {{ countSignUp }}
        <p>近6个月报名</p>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <span>
        <i class="el-icon-s-custom"></i>
      </span>
      <div>
        {{ countJob }}
        <p>在招职位</p>
      </div>
    </div>
  </div>
</template>

<script>
// 引用公用样式
import "../../assets/css/all.css";

export default{
    name: "TopTitle",
    data(){
        return {
            // 统计全部报名人数
            countSignUp: 0,
            // 统计在招职位数量
            countJob: 2,
        }
    }
}
</script>

<style scoped>
.topTitle{
    height: 140px;
    border-radius: 5px;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.topTitle > div{
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.topTitle > div span{
    width: 56px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.1);
    margin: 0 20px;
}
.topTitle > div div{
    text-align: center;
    color: #3c4858;
    font-size: 22px;
}
.topTitle > div div p{
    color: #8392a7;
    font-size: 14px;
}
</style>